<template>
<!--  <div class="row justify-center container-row">-->
<!--    <div class="col-8">-->
<!--      <div class="row justify-center row-padding">-->
    <div class="container">
      <div class="row-padding justify-center container-xxl container-row">
        <div class="logo text-body2 text-left">
          <a href="javascript:;">
            <q-icon :name="biEnvelopeOpenFill" left size="1.5rem" color="white"/>
          </a>
          <a href="javascript:;">
            <q-icon :name="biTwitterX" left size="1.5rem" color="white"/>
          </a>
          <a href="javascript:;">
            <q-icon :name="biFacebook" left size="1.5rem" color="white"/>
          </a>
        </div>

        <div class="text-body2">
<!--          <div class="text-left"><q-icon :name="biChevronLeft" left size="1rem" color=""/></div>-->
          <div class="text-center">Save 20% use code: BULKSAVE</div>
<!--          <div class="text-right"><q-icon :name="biChevronRight" left size="1rem"/></div>-->
        </div>
      </div>
    </div>

<!--  </div>-->
</template>

<script lang="ts" setup>
import { biEnvelopeOpenFill, biTwitterX, biFacebook, biChevronLeft, biChevronRight } from '@quasar/extras/bootstrap-icons'
</script>

<style lang="less" scoped>
.container{
  background: black;
}
.container-row{
  background: rgba(0,0,0);
  height: 40px;
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.row > div{
  //padding: 10px 15px;
  background: rgb(0, 0, 0);
  color: white;
  height: 40px;
}
.logo{
  display: flex;
  //justify-content: center;
  a{
    padding-right: 15px;
  }
}
.text-body2{
  display: flex;
  align-items: center;
}
/* 最左一个 */
.text-right {
  margin-left: auto;
  color: white;
}

/* 最右一个 */
.text-center {
  margin-left: auto;
  color: white;
}
span{
  margin-right: 0;
  color: white;
}
.row-padding{
  padding: 0px 50px;
}
.q-icon{
  :hover{
    cursor: pointer;
  }
}
</style>